<template>
  <div class="app-container">
    <el-card>
      <h4>Instance信息</h4>
      开发中...
    </el-card>
  </div>
</template>

<script>
import { getRdsInstance } from '@/api/rds/instance'
import { snakeCaseObject } from '@/libs/object'
import { instanceColumns, databaseColumns } from '@/views/rds/instance/components/config'

export default {
  name: 'InstanceDetail',
  components: {},
  data() {
    return {
      instanceColumns: [],
      databaseColumns: [],
      instanceDatas: [],
      databaseDatas: [],
      expandedDatabaseName: ''
    }
  },
  computed: {
    instanceId() {
      return this.$route.params.instanceId
    }
  },
  mounted() {
    this.instanceColumns = instanceColumns(this)
    this.databaseColumns = databaseColumns(this)
    this.getRdsInstance()
  },
  methods: {
    async getRdsInstance() {
      const { data } = await getRdsInstance(snakeCaseObject(this.instanceId))
      this.instanceDatas = data.instances
      this.databaseDatas = data.databases
    },
    onExpand(row, status) {
      this.databasesDatas.splice()
      if (status) {
        this.databasesDatas.filter((item, index) => {
          item._expanded = item.name === row.name
          this.expandedDatabaseName = row.name
          return item
        })
      } else {
        this.databasesDatas.map((item, index) => {
          item._expanded = false
          return item
        })
      }
    }
  }
}
</script>

<style lang='scs' scoped>
</style>
